import React from 'react'
import { useLocation,useParams } from 'react-router-dom'
import qs from 'qs'

export default function Music() {
const location = useLocation()
//pathname:/main/home/music
//search: "?name=%E5%BC%A0%E4%B8%89&age=18"
//state: {a: 1, b: 2}
console.log(location);

//qs:把数组转换成对象
console.log(qs.parse(location.search.split("?")[1]));
const {name,age} = qs.parse(location.search.split("?")[1])

const data = location.state.data
console.log(data,'data');
console.log(useParams(),'params');
  return (
    <div>
      <p>当前版块{useParams().id}</p>
     <p> 姓名:{name}  年龄:{age}</p>
     <ul>
      {data.map(item=>{
        return <li key={item.id}>{item.item}</li>
      })}
     </ul>

    </div>
  )
}
